import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const myRole = 'banzhuren'

// // 全局注册自定义指令(当创建指令的时候，直接书写一个回调函数，这个函数默认是钩子函数中的bind)
// Vue.directive('role', (el, binding) => {
//   // 把不符合条件的按钮删除
//   if (!binding.value.includes(myRole)) {
//     // el.remove()
//     // el.parentNode.removeChild(el)
//     console.log(el, el.parentNode);
//   }
// })

/* 
  定义指令的时候，第二个参数可以书写成一个对象，这个对象内可以书写多个钩子函数，供不同的逻辑去使用
*/
Vue.directive('role', {
  /* bind：只调用一次，指令第一次绑定到元素的时候调用，在这里可以进行一次性的初始化设置 */
  bind() {
    console.log('bind');
  },
  /* inserted：被绑定元素插入父节点的时候调用，（仅保证父节点刷存在，但不一定已经被插入文档中） */
  inserted(el, binding) {
    console.log('inserted');
    if (!binding.value.includes(myRole)) {
      // el.remove()
      el.parentNode.removeChild(el)
      // console.log(el, el.parentNode);
    }
  },

  /* update：所在组件的 VNode 更新的时候调用，但是可能发生在其子 VNode 更新之前 */
  update() {
    console.log('update');
  },

  /* componentUpdate：指令所在组件的 VNode 及其子 VNode 全部更新后调用 */
  componentUpdated() {
    console.log('conponentUpdate');
  },
  /* 
    unbind：只调用一次，指令与元素解绑的时候调用
  */
  unbind() {
    console.log('unbind');
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')
